<!-- 内容 -->
<div class="wrapper">
  <style>
    .slick-dotted.slick-slider {
      margin-bottom: 0px;
    }

    .carousel {
      position: relative;
    }

    .slick-dots {
      position: absolute;
      bottom: 20px;
    }

    .font-size-banner p:hover {
      background: #0f6cd3;
      border: 1px solid #b4feff;
      color: #b4feff;
    }

    .font-size-banner p {
      border: 1px solid #fff;
      font-size: 14px;
      border-radius: 3px;
      padding: 8px 30px;
      color: #fff;
      cursor: pointer;
    }
  </style>
  <!--  Slider -->
  <div class="home-slider">
    <!-- Carousel -->
    <div id="home-slider" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->


      <div class="item active" id="item-1">
        <div class="container">
          <div class="row font-size-banner">
            <div class="col-sm-6 ">
              <h1 class="animated slideInDown delay-2 ">让应用交付更轻松</h1>
              <h4 class="animated fadeInUpBig delay-4"><span>为企业提供更便捷的<i>容器云服务</i></span></h4>
              <br />
              <!--<p class="btn-animate  animated bounceInDown delay-6" href="#">产品详情</p>-->
            </div>
            <div class="col-sm-6 hidden-xs">
              <img class="img-responsive" src="static/frontend_new/img/slide01.jpg">
            </div>
          </div> <!-- / .row -->
        </div> <!-- / .container -->
      </div>
      <div class="item " id="item-2">
        <div class="container">
          <div class="row font-size-banner">
            <div class="col-sm-7 hidden-xs">
              <div class="">
                <div class="video-container">
                  <img class="img-responsive" src="static/frontend_new/img/slide02.jpg">
                </div>
              </div>
            </div>
            <div class="col-sm-5">
              <h1 class="animated fadeInUpBig delay-2 ">企业私有容器云平台</h1>
              <h4 class="animated slideInDown delay-4"><span>在原有IT基础架构上<i>搭建容器集群</i></span></h4>
              <br />

            </div>
          </div> <!-- / .row -->
        </div> <!-- / .container -->
      </div>


    </div>
  </div>



  <!--容器云产品-->
<!--  <div class="main-bg-blue solution-height">
    <h2 class="in-h2">产品和解决方案</h2>
    <div class="field-description">
      <p>
        适合各种应用场景
      </p>
    </div>
    <div class="solution-wear">
      <a class="carousel-control left">
        <i class="fa fa-angle-left fa-2x"></i>
      </a>
      <a class="carousel-control right">
        <i class="fa fa-angle-right fa-2x"></i>
      </a>
      <div class="solu-film">

        <div class="solu-category ">
          <div class="jjfa-icon bank"><img src="static/frontend_new/img/desktop.png" alt=""></div>
          <div class="jjfa-line"></div>
          <div class="solu-title">一站式快捷服务</div>
          <div class="solu-description">
            帮企业在几分钟内创建自动化持续交付研发流程，让企业专业于核心业务，无需为持续交付、自动化运维分心。
          </div>
          <a class="solu-btn button1" href="#">查看详情</a>

        </div>
      </div> &lt;!&ndash; / .row &ndash;&gt;
    </div> &lt;!&ndash; / .container &ndash;&gt;
  </div>-->





<!--容器云产品-->
<div class="main-bg-blue solution-height">
  <h2 class="in-h2">解决方案</h2>
  <div class="field-description ">
    <p>
      我们以行业需求切入云计算领域，并持续保持公有云解决方案的专业优势
    </p>

  </div>
  <div class="index_solution  container">
    <div class="m-pcard">
      <a class="pcard_act" href="container_service">
        <i class="i-prod i-prod-register"><img src="static/frontend_new/img/desktop.png" alt=""></i>
        <h3 class="pcard_tt">一站式快捷服务</h3>
        <p class="pcard_dec">帮企业在几分钟内创建自动化持续交付研发流程，让企业专业于核心业务，无需为持续交付、自动化运维分心。</p>
        <span class="pcard_link">了解详情&gt;</span>
      </a>
    </div>
    <div class="m-pcard">
      <a class="pcard_act" href="container_enterprise">
        <i class="i-prod i-prod-register"><img src="static/frontend_new/img/icon-block1.png" alt=""></i>
        <h3 class="pcard_tt">企业私有容器云平台</h3>
        <p class="pcard_dec">企业版可以助力企业在原有IT基础架构基础上，轻松搭建容器集群，构建持续交付流程，提供安全可靠的自动化运维能力。</p>
        <span class="pcard_link">了解详情&gt;</span>
      </a>
    </div>
    <div class="m-pcard">
      <a class="pcard_act" href="container_guide">
        <i class="i-prod i-prod-anticheat"><img src="static/frontend_new/img/article-girl.png" alt=""></i>
        <h3 class="pcard_tt">容器技术导航</h3>
        <p class="pcard_dec">提供最新容器技术及实践导航，帮助企业轻松掌握docker、容器云、微服务、持续交付的核心理念，学习实践经验。</p>
        <span class="pcard_link">了解详情&gt;</span>
      </a>
    </div>
    <div class="m-pcard">
      <a class="pcard_act" href="container_bigdata">
        <i class="i-prod i-prod-register"><img src="static/frontend_new/img/icon-block3.png" alt=""></i>
        <h3 class="pcard_tt">容器大数据平台</h3>
        <p class="pcard_dec">容器大数据平台帮助有大数据需求的企业更快、更轻松的搭建大数据平台，为个性化的需求提供解决方案。</p>
        <span class="pcard_link">了解详情&gt;</span>
      </a>
    </div>

  </div>
  <!--<div class="index_solution  container">
      <div class="m-pcard">
          <a class="pcard_act" href="container_service">
              <i class="i-prod i-prod-register"><img src="static/frontend_new/img/desktop.png" alt=""></i>
              <h3 class="pcard_tt">一站式快捷服务</h3>
              <p class="pcard_dec">无论企业的主机资源是公有云、私有云还是混合云，物理机还是虚拟机，均可由超级管家统一管理，提供
                  统一的应用持续交付入口。</p>
              <span class="pcard_link">了解详情&gt;</span>
          </a>
      </div>
      <div class="m-pcard">
          <a class="pcard_act" href="container_enterprise">
              <i class="i-prod i-prod-register"><img src="static/frontend_new/img/icon-block1.png" alt=""></i>
              <h3 class="pcard_tt">企业私有容器云平台</h3>
              <p class="pcard_dec">无论企业的主机资源是公有云、私有云还是混合云，物理机还是虚拟机，均可由超级管家统一管理，提供
                  统一的应用持续交付入口。</p>
              <span class="pcard_link">了解详情&gt;</span>
          </a>
      </div>
      <div class="m-pcard">
          <a class="pcard_act" href="container_guide">
              <i class="i-prod i-prod-anticheat"><img src="static/frontend_new/img/article-girl.png" alt=""></i>
              <h3 class="pcard_tt">容器技术导航</h3>
              <p class="pcard_dec">无论企业的主机资源是公有云、私有云还是混合云，物理机还是虚拟机，均可由超级管家统一管理，提供
                  统一的应用持续交付入口。</p>
              <span class="pcard_link">了解详情&gt;</span>
          </a>
      </div>
      <div class="m-pcard">
          <a class="pcard_act" href="container_bigdata">
              <i class="i-prod i-prod-register"><img src="static/frontend_new/img/icon-block3.png" alt=""></i>
              <h3 class="pcard_tt">容器大数据平台</h3>
              <p class="pcard_dec">无论企业的主机资源是公有云、私有云还是混合云，物理机还是虚拟机，均可由超级管家统一管理，提供
                  统一的应用持续交付入口。</p>
              <span class="pcard_link">了解详情&gt;</span>
          </a>
      </div>






  </div>-->
</div>

<!--容器云产品-->


<!--混合云-->
<div class="benefits">
  <div class="container benefits-container">

    <div class="block">
      <div class="benefits-derc">
        <div class="derc-box J_stat_block">
          <p class="title J_stat_title">资源池化</p>
          <div class="content">
            传统的数据中心或云的资源利用率（不到20%）极低，而传统的IT方式难以做到隔离性和资源利用率很好的结合。自然云将集群资源池化，利用容器的隔离、轻量的特性，提高资源利用率。
          </div>
          <a class="tip-button btn-animation" href="#"><span>查看详情</span></a>
        </div>
      </div>
      <div class="benefits-img benefits-img-a">
        <div class="img-wrap"></div>
      </div>
    </div>
    <div class="block">
      <div class="benefits-derc">
        <div class="derc-box J_stat_block">
          <p class="title J_stat_title">跨平台支持</p>
          <div class="content">自然云系统，可安装在公有云、私有云、混合云之上，支持物理机、虚拟机。不管是什么样的环境，自然云提供的均是统一的持续交付使用方式。</div>
          <a class="tip-button btn-animation" href="#"><span>查看详情</span></a>
        </div>
      </div>
      <div class="benefits-img benefits-img-b">
        <div class="img-wrap"></div>
      </div>
    </div>
    <div class="block">
      <div class="benefits-derc">
        <div class="derc-box J_stat_block">
          <p class="title J_stat_title">自动伸缩</p>
          <div class="content">不管是10还是1000台服务器，自然云都可以在整个集群轻松实现弹性扩展。一键扩展应用实例，从而轻松应对业务的爆发式增长。</div>
          <a class="tip-button btn-animation" href=""><span>查看详情</span></a>
        </div>
      </div>
      <div class="benefits-img benefits-img-c">
        <div class="img-wrap"></div>
      </div>
    </div>
    <div class="block">
      <div class="benefits-derc">
        <div class="derc-box J_stat_block">
          <p class="title J_stat_title">持续交付</p>
          <div class="content">提供从代码提交、单元测试、构建、部署到自动化运维的一体化流程，支持完全自动化，提供完全隔离的构建环境，支持多任务并行构建。</div>
          <a class="tip-button btn-animation" href=""><span>查看详情</span></a>
        </div>
      </div>
      <div class="benefits-img benefits-img-d">
        <div class="img-wrap"></div>
      </div>
    </div>
    <div class="benefits-list">

    </div>
  </div>
</div>

<!--混合云-->

<!--行业方案-->
<div class="container">
  <h2 class="in-h2">行业方案</h2>
  <div class="field-description">
    <p>
      我们以行业需求为出发点，提供行业容器云行业解决方案
    </p>
  </div>
  <div class="panel-group index_hy" id="accordion">


    <div class="panel panel-default">
      <div class="index_hy_left">
        <div class="panel-heading">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
            IT解决方案提供商
          </a>
        </div>
        <div class="panel-heading">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed">
            大数据
          </a>
        </div>
        <div class="panel-heading">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="collapsed">
            传统企业
          </a>
        </div>
        <div class="panel-heading">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapsefour" class="collapsed">
            互联网金融
          </a>
        </div>
        <div class="panel-heading">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapsefive" class="collapsed">
            智能医疗
          </a>
        </div>
      </div>

      <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
          <div class="pull-left"><a href=""><img src="static/frontend_new/img/image4.jpg" alt=""></a>
          </div>
          <div class="pull-right-hy"><h2>IT解决方案提供商</h2>
            <span>IT解决方案提供商提供的产品众多，迭代频繁，传统的方式难以有效的管理众多产品，应对产品的快速迭代。自然云的持续交付功能，串联了代码提交、构建、部署到运维，并且支持全自动，既控制了产品质量，又保证产品快速交付，使得IT解决方案提供商可以专注于其核心功能。</span>
            <div class="btn_btn"><a href="">了解详细</a></div>
          </div>

        </div>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
          <div class="pull-left"><a href=""><img src="static/frontend_new/img/image2.jpg" alt=""></a>
          </div>
          <div class="pull-right-hy"><h2>大数据</h2>
            <span>企业大数据的挖掘与分析，为提高企业运营效率、业务价值和开拓企业新业务提供参考与导向，并为企业未来发展战略提供支持，实现企业整体竞争力的提升。借助于容器技术，自然云的跨平台支持和自动化运维，使得大数据平台的搭建与运维变得异常轻松，使得客户可以专注于挖掘大数据的核心价值。</span>
            <div class="btn_btn"><a href="">了解详细</a></div>
          </div>

        </div>
      </div>
      <div id="collapseThree" class="panel-collapse collapse">
        <div class="panel-body">
          <div class="pull-left"><a href=""><img src="static/frontend_new/img/image5.jpg" alt=""></a>
          </div>
          <div class="pull-right-hy"><h2>传统企业</h2>
            <span>传统行业包含很多业务，且流程复杂，在信息化的过程中会碰到应用众多，管理复杂、服务器利用率低的问题。自然云的一键部署/升级/回滚解决了应用管理复杂的问题。利用容器的隔离性，自然云通过资源池化，既保证了应用的隔离性，又降低了资源空置率，从而极大的提高了资源利用率。</span>
            <div class="btn_btn"><a href="">了解详细</a></div>
          </div>

        </div>
      </div>
      <div id="collapsefour" class="panel-collapse collapse">
        <div class="panel-body">
          <div class="pull-left"><a href=""><img src="static/frontend_new/img/image6.jpg" alt=""></a>
          </div>
          <div class="pull-right-hy"><h2>互联网金融</h2>
            <span>自然云基于容器提供的微服务解决方案，以轻巧灵活的方式，很好的适应了互联网金融领域服务和接口多的痛点。自然云的快速伸缩功能，可以做到根据流量的变化调整实例数，既应对了流量突发，又保证了资源利用率，从而帮助互联网金融企业使用最少的资源应对流量突发，大大降低了企业的成本。</span>
            <div class="btn_btn"><a href="">了解详细</a></div>
          </div>

        </div>
      </div>
      <div id="collapsefive" class="panel-collapse collapse">
        <div class="panel-body">
          <div class="pull-left"><a href=""><img src="static/frontend_new/img/image7.jpg" alt=""></a>
          </div>
          <div class="pull-right-hy"><h2>智能医疗</h2>
            <span>智能医疗是通过打造健康档案区域医疗信息平台，利用最先进的物联网技术，实现患者与医务人员、医疗机构、医疗设备之间的互动，逐步达到信息化。智能医疗领域需要使用各种深度学习套件（如Tensorflow、caffe），而这些套件的安装及其繁琐。自然云的一键部署功能使得智能医疗平台的安装变得轻轻松松。</span>
            <div class="btn_btn"><a href="">了解详细</a></div>
          </div>

        </div>
      </div>

    </div>

  </div>
</div>

<!--行业方案-->


</div> <!-- / .wrapper -->

<div class="wave-box">
  <div class="marquee-box marquee-up" id="marquee-box">
    <div class="marquee">
      <div class="wave-list-box" id="wave-list-box1">
        <ul>
          <li><img alt="波浪" src="static/frontend_new/img/wave_02.png" height="60"></li>
        </ul>
      </div>
      <div class="wave-list-box" id="wave-list-box2">
        <ul>
          <li><img alt="波浪" src="static/frontend_new/img/wave_02.png" height="60"></li>
        </ul>
      </div>
    </div>
  </div>


  <div class="marquee-box" id="marquee-box3">
    <div class="marquee">
      <div class="wave-list-box" id="wave-list-box4">
        <ul>
          <li><img alt="波浪" src="static/frontend_new/img/wave_01.png" height="60"></li>
        </ul>
      </div>
      <div class="wave-list-box" id="wave-list-box5">
        <ul>
          <li><img alt="波浪" src="static/frontend_new/img/wave_01.png" height="60"></li>
        </ul>
      </div>
    </div>
  </div>

</div>
<!--<div class="wave-box">
    <div class="marquee-box marquee-up" id="marquee-box">
        <div class="marquee">
            <div class="wave-list-box" id="wave-list-box1">
                <ul>
                    <li><img height="60" alt="波浪" src="static/frontend_new/img/wave_02.png"></li>
                </ul>
            </div>
            <div class="wave-list-box" id="wave-list-box2">
                <ul>
                    <li><img height="60" alt="波浪" src="static/frontend_new/img/wave_02.png"></li>
                </ul>
            </div>
        </div>
    </div>


    <div class="marquee-box" id="marquee-box3">
        <div class="marquee">
            <div class="wave-list-box" id="wave-list-box4">
                <ul>
                    <li><img height="60" alt="波浪" src="static/frontend_new/img/wave_01.png"></li>
                </ul>
            </div>
            <div class="wave-list-box" id="wave-list-box5">
                <ul>
                    <li><img height="60" alt="波浪" src="static/frontend_new/img/wave_01.png"></li>
                </ul>
            </div>
        </div>
    </div>

</div>-->

